<script setup lang="ts">
import { ref, onMounted } from 'vue'
import WelcomeItem from './WelcomeItem.vue'
import DocumentationIcon from './icons/IconDocumentation.vue'
import ToolingIcon from './icons/IconTooling.vue'
import EcosystemIcon from './icons/IconEcosystem.vue'
import CommunityIcon from './icons/IconCommunity.vue'
import SupportIcon from './icons/IconSupport.vue'

const terminalRef = ref<HTMLElement>()
const logs = ref<string[]>([])

// 模拟系统日志
const addLog = (message: string) => {
  const timestamp = new Date().toLocaleTimeString('en-US', {
    hour12: false,
    hour: '2-digit',
    minute: '2-digit',
    second: '2-digit'
  })
  logs.value.push(`[${timestamp}] ${message}`)
  // 限制日志数量
  if (logs.value.length > 10) {
    logs.value.shift()
  }
  // 滚动到底部
  setTimeout(() => {
    if (terminalRef.value) {
      terminalRef.value.scrollTop = terminalRef.value.scrollHeight
    }
  }, 10)
}

// 打开README编辑器
const openReadmeInEditor = () => {
  addLog('Opening README.md in editor...')
  fetch('/__open-in-editor?file=README.md')
    .then(() => addLog('README.md opened successfully.'))
    .catch(error => addLog(`Error opening README.md: ${error}`))
}

// 组件挂载时初始化
onMounted(() => {
  // 添加系统初始化日志
  addLog('[SYSTEM] Welcome module initialized')
  addLog('[MODULE] Loading system components...')
  
  // 模拟加载延迟
  setTimeout(() => {
    addLog('[MODULE] Documentation component loaded')
  }, 500)
  
  setTimeout(() => {
    addLog('[MODULE] Tooling component loaded')
  }, 1000)
  
  setTimeout(() => {
    addLog('[MODULE] Ecosystem component loaded')
  }, 1500)
  
  setTimeout(() => {
    addLog('[MODULE] Community component loaded')
  }, 2000)
  
  setTimeout(() => {
    addLog('[MODULE] Support component loaded')
    addLog('[SYSTEM] All components initialized successfully')
  }, 2500)
  
  // 初始化数字雨效果
  initMatrixRain()
})

// 初始化数字雨效果
const initMatrixRain = () => {
  const welcomeContainer = document.querySelector('.welcome-container')
  if (!welcomeContainer) return
  
  const matrixRain = document.createElement('div')
  matrixRain.classList.add('matrix-rain')
  welcomeContainer.appendChild(matrixRain)
  
  const chars = '0101010110101010'
  
  for (let i = 0; i < 50; i++) {
    const charElement = document.createElement('div')
    charElement.classList.add('matrix-char')
    charElement.textContent = chars[Math.floor(Math.random() * chars.length)]
    charElement.style.left = `${Math.random() * 100}%`
    charElement.style.top = `${Math.random() * 100}%`
    charElement.style.fontSize = `${Math.random() * 8 + 6}px`
    charElement.style.animationDuration = `${Math.random() * 8 + 8}s`
    charElement.style.animationDelay = `${Math.random() * 3}s`
    matrixRain.appendChild(charElement)
  }
}
</script>

<template>
  <div class="welcome-container">
    <!-- 终端风格标题栏 -->
    <div class="terminal-header">
      <div class="terminal-buttons">
        <div class="button red"></div>
        <div class="button yellow"></div>
        <div class="button green"></div>
      </div>
      <div class="terminal-title">NEXUS_OS_终端</div>
    </div>
    
    <!-- 主内容区域 -->
    <div class="main-content">
      <!-- 左侧内容 -->
      <div class="content-left">
        <!-- 系统欢迎消息 -->
        <div class="welcome-message">
          <h1 class="hacker-title">欢迎使用NEXUS操作系统</h1>
          <p class="system-subtitle">系统版本: v2.3.5</p>
          <div class="system-status">
            <span class="status-text">系统状态: <span class="status-online">在线</span></span>
            <span class="security-level">安全等级: <span class="level-high">高级</span></span>
          </div>
        </div>
        
        <!-- 功能列表 -->
        <div class="features-list">
          <WelcomeItem>
            <template #icon>
              <DocumentationIcon />
            </template>
            <template #heading>文档</template>
            
            Vue的
            <a href="https://vuejs.org/" target="_blank" rel="noopener">官方文档</a>
            提供了开始使用所需的所有信息。
          </WelcomeItem>
          
          <WelcomeItem>
            <template #icon>
              <ToolingIcon />
            </template>
            <template #heading>开发工具</template>
            
            本项目使用
            <a href="https://vite.dev/guide/features.html" target="_blank" rel="noopener">Vite</a>
            提供服务和打包。推荐的IDE配置是
            <a href="https://code.visualstudio.com/" target="_blank" rel="noopener">VSCode</a>
            +
            <a href="https://github.com/vuejs/language-tools" target="_blank" rel="noopener">Vue - 官方插件</a>。如果
            您需要测试组件和网页，可以查看
            <a href="https://vitest.dev/" target="_blank" rel="noopener">Vitest</a>
            和
            <a href="https://www.cypress.io/" target="_blank" rel="noopener">Cypress</a>
            /
            <a href="https://playwright.dev/" target="_blank" rel="noopener">Playwright</a>。
            
            <br />
            
            更多说明可在
            <a href="javascript:void(0)" @click="openReadmeInEditor"><code>README.md</code></a> 中查看。
          </WelcomeItem>
          
          <WelcomeItem>
            <template #icon>
              <EcosystemIcon />
            </template>
            <template #heading>生态系统</template>
            
            获取项目的官方工具和库：
            <a href="https://pinia.vuejs.org/" target="_blank" rel="noopener">Pinia</a>、
            <a href="https://router.vuejs.org/" target="_blank" rel="noopener">Vue Router</a>、
            <a href="https://test-utils.vuejs.org/" target="_blank" rel="noopener">Vue Test Utils</a> 和
            <a href="https://github.com/vuejs/devtools" target="_blank" rel="noopener">Vue Dev Tools</a>。如果
            您需要更多资源，我们建议访问
            <a href="https://github.com/vuejs/awesome-vue" target="_blank" rel="noopener">Awesome Vue</a>。
          </WelcomeItem>
          
          <WelcomeItem>
            <template #icon>
              <CommunityIcon />
            </template>
            <template #heading>社区</template>
            
            遇到问题？在
            <a href="https://chat.vuejs.org" target="_blank" rel="noopener">Vue Land</a>
            （我们的官方Discord服务器）或
            <a href="https://stackoverflow.com/questions/tagged/vue.js" target="_blank" rel="noopener">StackOverflow</a> 上提问。
            您还可以关注官方的
            <a href="https://bsky.app/profile/vuejs.org" target="_blank" rel="noopener">@vuejs.org</a>
            Bluesky账号或
            <a href="https://x.com/vuejs" target="_blank" rel="noopener">@vuejs</a>
            X账号获取Vue世界的最新消息。
          </WelcomeItem>
          
          <WelcomeItem>
            <template #icon>
              <SupportIcon />
            </template>
            <template #heading>支持Vue</template>
            
            As an independent project, Vue relies on community backing for its sustainability. You can help
            us by
            <a href="https://vuejs.org/sponsor/" target="_blank" rel="noopener">becoming a sponsor</a>.
          </WelcomeItem>
        </div>
      </div>
      
      <!-- 右侧终端 -->
      <div class="content-right">
        <div class="terminal-panel">
          <div class="terminal-title">SYSTEM LOGS</div>
          <div class="terminal-content" ref="terminalRef">
            <div v-for="(log, index) in logs" :key="index" class="log-entry">
              {{ log }}
            </div>
          </div>
          <div class="terminal-input">
            <span class="prompt">>_</span>
            <input type="text" class="terminal-input-field" placeholder="Type command..." @keydown.enter="handleCommandInput" />
          </div>
        </div>
      </div>
    </div>
    
    <!-- 数字雨背景效果 -->
    <div class="matrix-rain"></div>
  </div>
</template>

<style scoped>
/* 欢迎容器 */
.welcome-container {
  width: 100%;
  height: 100%;
  background-color: var(--hacker-panel-dark);
  color: var(--hacker-text);
  font-family: 'Courier New', monospace;
  position: relative;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  /* 黑客风格网格背景 */
  background-image: 
    linear-gradient(rgba(0, 255, 65, 0.03) 1px, transparent 1px),
    linear-gradient(90deg, rgba(0, 255, 65, 0.03) 1px, transparent 1px);
  background-size: 20px 20px;
}

/* 终端标题栏 */
.terminal-header {
  height: 28px;
  background-color: var(--hacker-panel);
  border-bottom: 1px solid var(--hacker-border);
  display: flex;
  align-items: center;
  padding: 0 15px;
  z-index: 100;
}

/* 终端窗口按钮 */
.terminal-buttons {
  display: flex;
  gap: 6px;
  margin-right: 15px;
}

.terminal-buttons .button {
  width: 12px;
  height: 12px;
  border-radius: 50%;
  border: 1px solid rgba(255, 255, 255, 0.2);
}

.terminal-buttons .button.red {
  background-color: #ff5f56;
}

.terminal-buttons .button.yellow {
  background-color: #ffbd2e;
}

.terminal-buttons .button.green {
  background-color: #27c93f;
}

/* 终端标题 */
.terminal-title {
  flex: 1;
  color: var(--hacker-green);
  font-size: 12px;
  font-family: 'Courier New', monospace;
  text-align: center;
  letter-spacing: 2px;
  text-transform: uppercase;
}

/* 主内容区域 */
.main-content {
  flex: 1;
  display: flex;
  padding: 30px;
  gap: 30px;
  position: relative;
  overflow: hidden;
}

/* 左侧内容 */
.content-left {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 30px;
  position: relative;
  z-index: 10;
}

/* 欢迎消息 */
.welcome-message {
  background-color: rgba(0, 0, 0, 0.7);
  border: 1px solid var(--hacker-border);
  padding: 20px;
  border-radius: 4px;
  box-shadow: 0 0 15px rgba(0, 255, 65, 0.1);
}

/* 黑客风格标题 */
.hacker-title {
  color: var(--hacker-green);
  font-size: 28px;
  margin-bottom: 10px;
  letter-spacing: 3px;
  text-transform: uppercase;
  text-shadow: 0 0 10px var(--hacker-green-glow);
  font-family: 'Courier New', monospace;
}

/* 系统副标题 */
.system-subtitle {
  color: var(--hacker-text);
  font-size: 14px;
  margin-bottom: 15px;
  font-family: 'Courier New', monospace;
  letter-spacing: 1px;
}

/* 系统状态 */
.system-status {
  display: flex;
  gap: 30px;
  font-size: 12px;
  font-family: 'Courier New', monospace;
  letter-spacing: 1px;
}

.status-text {
  color: var(--hacker-text);
}

.status-online {
  color: var(--hacker-green);
  font-weight: bold;
  text-shadow: 0 0 5px var(--hacker-green-glow);
  animation: statusPulse 2s infinite alternate;
}

.security-level {
  color: var(--hacker-text);
}

.level-high {
  color: #ffbd2e;
  font-weight: bold;
}

/* 功能列表 */
.features-list {
  flex: 1;
  position: relative;
}

/* 右侧终端 */
.content-right {
  width: 350px;
  min-width: 300px;
  position: relative;
  z-index: 10;
}

/* 终端面板 */
.terminal-panel {
  height: 100%;
  background-color: rgba(0, 0, 0, 0.8);
  border: 1px solid var(--hacker-border);
  border-radius: 4px;
  display: flex;
  flex-direction: column;
  box-shadow: 0 0 15px rgba(0, 255, 65, 0.1);
}

/* 终端内容 */
.terminal-content {
  flex: 1;
  padding: 15px;
  overflow-y: auto;
  font-family: 'Courier New', monospace;
  font-size: 12px;
  line-height: 1.5;
}

/* 日志条目 */
.log-entry {
  color: var(--hacker-green);
  margin-bottom: 5px;
  animation: logType 0.3s ease-out;
}

/* 终端输入 */
.terminal-input {
  padding: 10px 15px;
  border-top: 1px solid var(--hacker-border);
  display: flex;
  align-items: center;
  gap: 10px;
}

.prompt {
  color: var(--hacker-green);
  font-family: 'Courier New', monospace;
  font-size: 14px;
}

.terminal-input-field {
  flex: 1;
  background: transparent;
  border: none;
  color: var(--hacker-green);
  font-family: 'Courier New', monospace;
  font-size: 14px;
  outline: none;
}

.terminal-input-field::placeholder {
  color: var(--hacker-green-dark);
  font-style: italic;
}

/* 数字雨背景效果 */
.matrix-rain {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 1;
}

.matrix-char {
  position: absolute;
  color: rgba(0, 255, 65, 0.1);
  font-family: 'Courier New', monospace;
  opacity: 0;
  animation: matrixRain linear infinite;
  transform-origin: 0 0;
}

/* 动画效果 */
@keyframes matrixRain {
  0% {
    transform: translateY(-10%) rotate(0deg);
    opacity: 0;
  }
  10% {
    opacity: 0.5;
  }
  90% {
    opacity: 0.5;
  }
  100% {
    transform: translateY(110%) rotate(10deg);
    opacity: 0;
  }
}

@keyframes statusPulse {
  0% {
    text-shadow: 0 0 5px var(--hacker-green-glow);
  }
  100% {
    text-shadow: 0 0 15px var(--hacker-green-glow), 0 0 30px rgba(0, 255, 65, 0.5);
  }
}

@keyframes logType {
  from {
    opacity: 0;
    transform: translateX(-10px);
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}

/* 自定义滚动条 */
::-webkit-scrollbar {
  width: 8px;
  height: 8px;
}

::-webkit-scrollbar-track {
  background: var(--hacker-panel-dark);
}

::-webkit-scrollbar-thumb {
  background: var(--hacker-green-dark);
  border: 1px solid var(--hacker-green-glow);
}

::-webkit-scrollbar-thumb:hover {
  background: var(--hacker-green);
  box-shadow: 0 0 8px var(--hacker-green-glow);
}

/* 响应式设计 */
@media (max-width: 1024px) {
  .main-content {
    flex-direction: column;
    padding: 20px;
    gap: 20px;
  }
  
  .content-right {
    width: 100%;
    min-height: 300px;
  }
  
  .system-status {
    flex-direction: column;
    gap: 10px;
  }
  
  .hacker-title {
    font-size: 24px;
  }
}

@media (max-width: 768px) {
  .main-content {
    padding: 15px;
  }
  
  .welcome-message {
    padding: 15px;
  }
  
  .hacker-title {
    font-size: 20px;
    letter-spacing: 2px;
  }
  
  .terminal-content {
    font-size: 11px;
  }
}
</style>

<script lang="ts">
export default {
  methods: {
    // 处理终端命令输入
    handleCommandInput(event: Event) {
      const inputElement = event.target as HTMLInputElement
      const command = inputElement.value.trim()
      
      if (command) {
        // 清空输入
        inputElement.value = ''
        
        // 添加命令到日志
       // this.$refs.terminalRef.scrollTop = this.$refs.terminalRef.scrollHeight
        
        // 模拟命令执行
        this.simulateCommand(command)
      }
    },
    
    // 模拟命令执行
    simulateCommand(command: string) {
      const addLog = (message: string) => {
        const timestamp = new Date().toLocaleTimeString('en-US', {
          hour12: false,
          hour: '2-digit',
          minute: '2-digit',
          second: '2-digit'
        })
        //this.logs.push(`[${timestamp}] ${message}`)
        
        // 限制日志数量
       // if (this.logs.length > 10) {
         // this.logs.shift()
        //}
        
        // 滚动到底部
        setTimeout(() => {
          if (this.$refs.terminalRef) {
           // this.$refs.terminalRef.scrollTop = this.$refs.terminalRef.scrollHeight
          }
        }, 10)
      }
      
      // 添加命令日志
      addLog(`[CMD] ${command}`)
      
      // 模拟不同命令的响应
      setTimeout(() => {
        if (command.toLowerCase() === 'help') {
          addLog('Available commands:')
          addLog('- help: Show available commands')
          addLog('- clear: Clear terminal')
          addLog('- status: Show system status')
          addLog('- version: Show system version')
        } else if (command.toLowerCase() === 'clear') {
        //  this.logs = []
        } else if (command.toLowerCase() === 'status') {
          addLog('System status: ONLINE')
          addLog('Security level: HIGH')
          addLog('Active connections: 0')
        } else if (command.toLowerCase() === 'version') {
          addLog('NEXUS OS v2.3.5')
          addLog('Build: 20240615.01')
        } else {
          addLog(`Command not found: ${command}`)
          addLog('Type "help" to see available commands')
        }
      }, 300)
    }
  }
}
</script>
